<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
</head>
<body>
    <canvas id="circuitCanvas" width="550" height="350"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '16px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Component Coordinates ---
        const j1_x = 80, j1_y = 100; // Left junction
        const j2_x = 280, j2_y = 175; // Right junction
        const res_10_start_x = 130, res_10_end_x = 230;
        const res_x_start_x = 130, res_x_end_x = 230;
        const res_y_top = 100, res_y_bottom = 250;
        const res_height = 15;
        const h_start_x = 330, h_end_x = 410;
        const h_y = 175;
        const e_left_x = 230, e_right_x = 280, e_y = 50;

        // --- Helper function to draw a resistor ---
        function drawResistor(x, y, width, height) {
            ctx.strokeRect(x, y, width, height);
        }

        // --- Helper function to draw a junction dot ---
        function drawJunction(x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 4, 0, 2 * Math.PI);
            ctx.fillStyle = 'black';
            ctx.fill();
        }

        // --- Drawing the circuit ---

        // Parallel part
        // Top branch (10 Ohm resistor)
        ctx.beginPath();
        ctx.moveTo(j1_x, j1_y);
        ctx.lineTo(res_10_start_x, j1_y);
        ctx.stroke();
        drawResistor(res_10_start_x, j1_y - res_height / 2, res_10_end_x - res_10_start_x, res_height);
        ctx.fillText('10 Ω', (res_10_start_x + res_10_end_x) / 2, j1_y - 25);
        ctx.beginPath();
        ctx.moveTo(res_10_end_x, j1_y);
        ctx.lineTo(j2_x, j1_y);
        ctx.lineTo(j2_x, j2_y);
        ctx.stroke();

        // Bottom branch (Resistor X)
        ctx.beginPath();
        ctx.moveTo(j1_x, j1_y);
        ctx.lineTo(j1_x, res_y_bottom);
        ctx.lineTo(res_x_start_x, res_y_bottom);
        ctx.stroke();
        drawResistor(res_x_start_x, res_y_bottom - res_height / 2, res_x_end_x - res_x_start_x, res_height);
        ctx.fillText('X', (res_x_start_x + res_x_end_x) / 2, res_y_bottom + 20);
        ctx.beginPath();
        ctx.moveTo(res_x_end_x, res_y_bottom);
        ctx.lineTo(j2_x, res_y_bottom);
        ctx.lineTo(j2_x, j2_y);
        ctx.stroke();

        // Junctions
        drawJunction(j1_x, j1_y);
        drawJunction(j2_x, j2_y);

        // Heater H
        ctx.beginPath();
        ctx.moveTo(j2_x, h_y);
        ctx.lineTo(h_start_x, h_y);
        ctx.stroke();
        // Draw heater symbol (rectangle with lines)
        ctx.strokeRect(h_start_x, h_y - res_height / 2, h_end_x - h_start_x, res_height);
        const heater_width = h_end_x - h_start_x;
        ctx.beginPath();
        ctx.moveTo(h_start_x + heater_width / 4, h_y - res_height / 2);
        ctx.lineTo(h_start_x + heater_width / 4, h_y + res_height / 2);
        ctx.moveTo(h_start_x + heater_width / 2, h_y - res_height / 2);
        ctx.lineTo(h_start_x + heater_width / 2, h_y + res_height / 2);
        ctx.moveTo(h_start_x + 3 * heater_width / 4, h_y - res_height / 2);
        ctx.lineTo(h_start_x + 3 * heater_width / 4, h_y + res_height / 2);
        ctx.stroke();
        ctx.fillText('H', (h_start_x + h_end_x) / 2, h_y - 25);

        // Connection to source E
        // Left side
        ctx.beginPath();
        ctx.moveTo(j1_x, j1_y);
        ctx.lineTo(j1_x, e_y);
        ctx.lineTo(e_left_x, e_y);
        ctx.stroke();

        // Right side
        ctx.beginPath();
        ctx.moveTo(h_end_x, h_y);
        ctx.lineTo(500, h_y);
        ctx.lineTo(500, e_y);
        ctx.lineTo(e_right_x, e_y);
        ctx.stroke();
        
        // Source E terminals
        ctx.beginPath();
        ctx.arc(e_left_x, e_y, 4, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(e_right_x, e_y, 4, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.fillText('E', (e_left_x + e_right_x) / 2, e_y - 15);

        // Figure caption
        ctx.fillText('Fig. 8.1', canvas.width / 2, canvas.height - 20);

    </script>
</body>
</html>